<template>
	<div>分类
		<div class="scrollar" ref="">
			<div class="wrapper" ref="wrapper">
				<ul>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>1</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<li>2</li>
					<button @click="toZero">颜色</button>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import BScroll from '@better-scroll/core';
	import Pullup from '@better-scroll/pull-up';
	export default {
		name: "Category",
		mounted() {
			this.initBSCroll()
		},
		methods: {
			initBSCroll() {
				BScroll.use(Pullup);
				this.bscroll = new BScroll(this.$refs.wrapper, {
						scrollY: true,
						scrollbar: true,
						probeType: 3,
						pullUpLoad: true
					}),
					this.bscroll.on('scroll', (position) => {
						// console.log(position.x, position.y)
					}),
					this.bscroll.on('pullingUp', () => {
						console.log('上拉加载');

						setTimeout(() => {
							this.bscroll.finishPullUp();
						}, 500)

					})


			},
			toZero() {
				this.bscroll.scrollTo(0, 0, 100, undefined, {})
			}
		},
		data() {
			return {
				bscroll: null
			}
		}
	}
</script>

<style>
	.scrollar {
		height: 100vh;
	}

	.wrapper {
		height: 200px;
		overflow: hidden;
		background-color: red;
	}
</style>
